<template>
	<div>
		<block v-for="item of stores" :key="item.store.id">
			<view @click="onClickGotoShopDetailPage(item.store.id)" class="index-list-item">
				<image mode="aspectFill" :src="commonImg(item.store.coverImage)" class="index-list-item-img"></image>
				<view class="index-list-item-info">
					<view class="index-list-item-info-name">
						<text class="index-list-item-info-name-txt">{{ item.store.storeName }}</text>
						<text class="index-list-item-info-name-jl">{{ item.store.jlresult }}km</text>
					</view>
					<view class="index-list-item-info-discount">
						<view class="index-list-item-info-discount-item">
							<!-- <text class="index-list-item-info-discount-item-vipleft">折</text> -->
							<text class="index-list-item-info-discount-item-viplefttxt">PLUS会员{{ item.store.vip2 }}折</text>
						</view>
						<view class="index-list-item-info-discount-item">
							<!-- <text class="index-list-item-info-discount-item-huiyuanleft">折</text> -->
							<text class="index-list-item-info-discount-item-huiyuanlefttxt">会员{{ item.store.vip1 }}折</text>
						</view>
					</view>
					<view v-if="(item.tagList !== undefined) && item.tagList.length" class="index-list-item-info-list">
						<block v-for="item of item.tagList" :key="item.id">
							<view class="index-list-item-info-list-item">
								<text class="index-list-item-info-list-item-content">{{ item.content }}</text>
							</view>
						</block>
					</view>
				</view>
			</view>
		</block>
	</div>
</template>

<script>
	import {myMixin} from '@/utils/mixin.js';
	export default {
		mixins: [myMixin],
		props:{
			stores:{
				type:Array
			}
		},
		data() {
			return {

			}
		},
		methods: {
			onClickGotoShopDetailPage(id) {
				console.log(id)
				if (!id) {
					return false;
				}
				uni.navigateTo({
					url: `../shopdetail/shopdetail?id=${id}`
				});
			},
		}
	}
</script>

<style>
.index-list-item {
		width: 100%;
		height: 220rpx;
		background-color: #fff;
		margin-bottom: 14rpx;
		box-sizing: border-box;
		padding-left: 26rpx;
		display: flex;
		align-items: center;
	}

	.index-list-item:last-child {
		margin-bottom: 0;
	}

	.index-list-item-img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 4rpx;
	}

	.index-list-item-info {
		margin-left: 32rpx;
		display: flex;
		flex-direction: column;
		min-width: 450rpx;
		align-self: flex-start;
		padding-top: 24rpx;
	}

	.index-list-item-info-name {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.index-list-item-info-name-txt {
		font-size: 30rpx;
		font-weight: 500;
		line-height: 42rpx;
		color: #333333;
	}

	.index-list-item-info-name-jl {
		font-size: 22rpx;
		line-height: 32rpx;
		color: #999999;
	}

	.index-list-item-info-score {
		margin-top: 4rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 2rpx;
	}

	.index-list-item-info-score-txt {
		margin-left: 14rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #333333;
		font-weight: 500;
		position: relative;
		top: -4rpx;
	}

	.index-list-item-info-discount {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}

	.index-list-item-info-discount-item {
		display: flex;
		align-items: center;
		margin-right: 16rpx;
	}

	.index-list-item-info-discount-item:last-child {
		margin-right: 0;
	}

	.index-list-item-info-discount-item-vipleft {
		font-size: 24rpx;
		font-weight: 400;
		color: #e8541e;
		line-height: 34rpx;
		padding: 2rpx 4rpx 0 8rpx;
		border-radius: 2rpx;
		background: rgba(233, 90, 39, 0.1);
	}

	.index-list-item-info-discount-item-viplefttxt {
		font-size: 24rpx;
		line-height: 34rpx;
		color: #e8541e;
		margin-left: 10rpx;
	}

	.index-list-item-info-discount-item-huiyuanleft {
		font-size: 24rpx;
		font-weight: 400;
		color: #1e92e8;
		line-height: 34rpx;
		padding: 2rpx 4rpx 0 8rpx;
		border-radius: 2rpx;
		background: rgba(30, 146, 232, 0.1);
	}

	.index-list-item-info-discount-item-huiyuanlefttxt {
		font-size: 24rpx;
		line-height: 34rpx;
		color: #1e92e8;
		margin-left: 10rpx;
	}

	.index-list-item-info-list {
		margin-top: 14rpx;
		display: flex;
		align-items: center;
	}

	.index-list-item-info-list-item {
		display: flex;
		align-items: center;
		margin-right: 18rpx;
	}

	.index-list-item-info-list-item-content {
		position: relative;
		display: inline-block;
		line-height: 34rpx;
		padding: 2rpx 14rpx;
		margin-left: 20rpx;
		background-color: #f7b500;
		font-size: 14rpx;
		font-weight: normal;
		color: #ffffff;
		border-radius: 4rpx;
		box-sizing: border-box;
	}

	.index-list-item-info-list-item-content::before {
		content: '';
		display: block;
		position: absolute;
		top: -6rpx;
		left: -42rpx;
		border-width: 24rpx;
		border-style: solid;
		border-color: transparent #f7b500 transparent transparent;
		border-top-right-radius: 50%;
		border-bottom-right-radius: 50%;
	}

	.index-list-item-info-list-item-content::after {
		content: '';
		display: block;
		position: absolute;
		top: calc(50% - 4rpx);
		left: 0;
		width: 8rpx;
		height: 8rpx;
		background-color: #ffffff;
		border-radius: 50%;
	}
</style>
